<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="app-container" v-loading="activeIndex>=0&&!applets[activeIndex].loaded"
       element-loading-background="#f4f8f9"
       element-loading-text="正在加载......">
    <iframe v-for="(app,idx) in applets" class="ft-applet" :key="app.appletId" :src="app.routeUrl"
            v-show="idx==activeIndex" @load="onAppletLoad(app,idx)" ref="applet">
    </iframe>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: 'AppletPage',
    computed: {
      ...mapState(['applets', 'activeIndex'])
    },
    methods: {
      onAppletLoad(app, idx) {
        this.$set(app, 'loaded', true)
        const appletDoc = this.$refs['applet'][idx].contentWindow.document
        if (appletDoc.getElementById('app')) {
          appletDoc.getElementById('app').style.padding = '0 24px'
        } else {
          appletDoc.getElementsByTagName('body')[0].style.margin = '0'
          appletDoc.getElementsByTagName('body')[0].style.backgroundColor = '#f4f8f9'
          appletDoc.getElementsByTagName('body')[0].style.padding = '0 24px'
        }
      }
    }
  }
</script>

<style scoped>
  .app-container {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .ft-applet {
    margin: 0;
    border: none;
    padding: 0;
    width: 100%;
    height: 100%;
  }
</style>
